<template>
    <div class="box">

         <div class="head">

                <img @click="fh" src="../../image//22.png"  alt="" style="width: 40px; height: 40px; border: none;" class="h-img" > <span class="h-span">提现记录</span>
        </div>

          <div class="main">
                      <div class="main-head">
                              <img class="main-head-img" style="width: 66px; height: 66px;" src="../../image//提现记录页_看图王_03.gif" alt="">
                      </div>

                       <div class="main-main">
                              <div class="main-m-left">
                                   <p class="main-left-p1">10-28</p>
                                   <p class="main-left-p2">2018</p>
                              </div>

                                <div class="main-m-middle">
                                   <img  style="width: 50px;height: 50px;" src="../../image//my_img//提现记录页-恢复的_03.gif" alt="">
                              </div>

                                <div class="main-m-right">
                                   <p class="main-right-p1">20元</p>
                                   <p class="main-right-p2">到账银行卡</p>
                                   <p class="main-right-p3"> <span style="color: #3087ea; margin-right: 80px;">已提现</span>  建设银行 尾号 9276 </p>
                              </div>

                       </div>

                        <div class="main-main">
                              <div class="main-m-left">
                                   <p class="main-left-p1">08-07</p>
                                   <p class="main-left-p2">2018</p>
                              </div>

                                <div class="main-m-middle">
                                   <img  style="width: 50px;height: 50px;" src="../../image//my_img//提现记录页-恢复的_03.gif" alt="">
                              </div>

                                <div class="main-m-right">
                                   <p class="main-right-p1">50元</p>
                                   <p class="main-right-p2">到账银行卡</p>
                                   <p class="main-right-p3"> <span style="color: #3087ea; margin-right: 80px;">已提现</span> 民生银行 尾号 9276 </p>
                              </div>
                       </div>

                        <div class="main-main">
                              <div class="main-m-left">
                                   <p class="main-left-p1">05-20</p>
                                   <p class="main-left-p2">2018</p>
                              </div>

                                <div class="main-m-middle">
                                   <img  style="width: 50px;height: 50px;" src="../../image//my_img//提现记录页-恢复的_03.gif" alt="">
                              </div>

                                <div class="main-m-right">
                                   <p class="main-right-p1">20元</p>
                                   <p class="main-right-p2">到账银行卡</p>
                                   <p class="main-right-p3"> <span style="color: #3087ea; margin-right: 80px;">已提现</span>建设银行 尾号 9276 </p>
                              </div>

                       </div>

          </div>



    </div>
</template>


<script setup lang="ts">
import {ref} from 'vue'
import axios  from 'axios'
import {useRouter} from 'vue-router'

const router=useRouter()

const userId=ref(JSON.parse(localStorage.getItem('userId')||''))
const sessionId=ref(JSON.parse(localStorage.getItem('sessionId')||''))



const moneylist=()=>{
    axios.get('/health/user/verify/v1/findUserDrawRecordList',
    {

        headers:{
         userId:userId.value as number,
        sessionId:sessionId.value as string
    },

    params:{
        page:1,
        count:10
    }
}
).then((res)=>{
      console.log(res,'提现记录')


      })
}

moneylist()


const fh=()=>{
    router.go(-1)
}

</script>

<style scoped lang="scss">


.box{
      display: flex;
      display: inline-block;
      width: 100%;
      height: 100%;
      background-color: #f2f2f2;
}

.head{
     display: flex;
     width: 100%;
     height: 75px; // 150px * 0.5
     background-color: #fff;
     align-items: center;
}
.h-img{
     margin-left: 2.5%; // 5% * 0.5
}
.h-span{
    font-size: 17.5px; // 35px * 0.5
    margin-left: 112.5px; // 225px * 0.5
}

.main{
     display: flex;
     display: inline-block;
     width: 100%;
     height: 450px; // 900px * 0.5
     margin-top: 1px; // 2px * 0.5
     background-color: #fff;
     margin-top: 10px; // 20px * 0.5
}

.main-head-img{
    margin-left: 75px; // 150px * 0.5
    margin-top: 20px; // 40px * 0.5
}

.main-main{
     display: flex;
     width: 100%;
     height: 137.5px; // 275px * 0.5
}

.main-m-left{
    display: flex;
    display: inline-block;
    width: 105px; // 210px * 0.5
    height: 152.5px; // 305px * 0.5
    border-right: 0.5px solid #999999; // 1px * 0.5

}
.main-left-p1{
     font-size: 20px; // 40px * 0.5
     margin-top: 25px; // 50px * 0.5
     margin-left: 20px; // 40px * 0.5
}
.main-left-p2{
     font-size: 12.5px; // 25px * 0.5
     margin-left: 36.5px; // 73px * 0.5
     color: #999999;
     margin-top: -15px; // -30px * 0.5
}




.main-m-middle{
     display: flex;
    margin-left: -13px; // -26px * 0.5
    margin-top: 37.5px; // 75px * 0.5
}



.main-m-right{
     display: flex;
     display: inline-block;
     width: 250px; // 500px * 0.5
     height: 107.5px; // 215px * 0.5
     border: 1.5px solid #ccc; // 3px * 0.5
     border-radius: 15px; // 30px * 0.5
     bottom: 1px solid #ccc; // 2px * 0.5
     margin-left: 29px; // 58px * 0.5
     margin-right: 20px; // 40px * 0.5
}
.main-right-p1{
     display: flex;
     margin-top: 10px; // 20px * 0.5
     font-size: 17.5px; // 35px * 0.5
    font-weight:bold;
     color: #d92109;
     margin-left: 15px; // 30px * 0.5
}
.main-right-p2{
     display: flex;
     margin-top: 7.5px; // 15px * 0.5
     font-size: 13px; // 26px * 0.5
     margin-left: 140px; // 280px * 0.5
}

.main-right-p3{
     display: flex;
     margin-top: 7.5px; // 15px * 0.5
     font-size: 13px; // 26px * 0.5
     margin-left: 15px; // 30px * 0.5
}

</style>
